<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>参数列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!--警告-->
            <el-alert title="注意：只能是第三栏" type="warning" show-icon :closable="false"></el-alert>
            <!--选择商品分类区-->
            <el-row class="cat_opt">
                <el-col>
                    <span>选择商品分类:</span>
                    <el-cascader
                    expand-trigger="hover"
                    :options="catelist"
                    :props="cateProps"
                    :collapse-tags="true"
                    v-model="selectedCateKeys"
                    @change="handleChange"></el-cascader>
                </el-col>
            </el-row>
            <!--选项卡-->
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="动态参数" name="first">
                    <el-button type="primary" size="mini">添加参数</el-button>
                </el-tab-pane>
                <el-tab-pane label="静态属性" name="second">
                    <el-button type="primary" size="mini">添加属性</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            catelist:[],
            cateProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            selectedCateKeys:[],
            //被激活页名称
            activeName:'first'
        }
    },
    created(){
        this.getCateList()
    },
    methods:{
        async getCateList(){
            const {data:res} = await this.$http.get('categories')
            if(res.meta.status !== 200){
                return this.$message.error('获取商品分类失败')
            }
            
            this.catelist = res.data
            //console.log(this.catelist)
        },
        handleChange(){
            if(this.selectedCateKeys.length !== 3){
                this.selectedCateKeys = []
                return
            }
            console.log(this.selectedCateKeys)
        },
        //tab点击事件
        handleTabClick(){
            console.log(this.activeName)
        }
    }
}
</script>

<style lang="less" scoped>
.cat_opt{
    margin:15px 0;
}
.el-popper{
    height: 200px;
    overflow-y: scroll;
}
</style>